<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/tools.js"></script>
</head>
<body>
<h1>当前是第<span id="num">1</span>页</h1>
<a id="a1" href="list.html?a=1">1</a>
<a href="list.html?a=2">2</a>
<a href="list.html?a=3">3</a>
<a href="list.html?a=4">4</a>
<a href="list.html?a=5">5</a>
<script>
    window.onload = function () {


        var nowPage = getParam('?', location.href);  //根据地址获得当前的a=几的数字
        document.getElementById('num').innerHTML = nowPage; //将数字放到<span>标签中

        var anchorS = document.getElementsByTagName('a');   //获取所有的a标签，HtmlCollection对象，是一个集合，可以像数组一样遍历
        for(var i = 0,len=anchorS.length;i<len;i++){
            //anchorS[i] 相当于 getElementById('a1')
           // console.log(anchorS[i].toString());

            //function 内的代码，在循环后还没有被执行
            //只有等到我们点击的时候才会执行
            //不用的原因是因为，i变量没有绑定到事件中
//            anchorS[i].onclick = function(){
//                console.log(anchorS[i].href);//console.log(anchorS[5].href),读取不到的
//                return false;
//            }


            //anchorS[i] 是外层的i
            anchorS[i].onclick = function(i){   //function(i),i是形参 var i
                return function () {
                    var href =  anchorS[i].href;        //< a href="????">
                    location.assign(href);//replace     //通过 location对象的方法进行跳转页面，assign会产生历史记录，replace不会产生历史记录
                    return false            //是为了让超链接本身的点击无效
                }
            }(i)  //（i）是实参
            
        }

    }



    /*
     for(var i = 0,len = as.length;i<len;i++){
     (function(j){
     as[j].onclick = function(){
     var href = as[j].href;
     console.log(href);
     location.replace(href);//assign

     return false;
     }
     })(i);

     }
     */
</script>
</body>
</html>